<template>
  <label for="msg">msg</label>
  <input id="msg" type="text" v-model.trim="msg" />
  <br />
  <label for="text">text</label>
  <input id="text" type="text" v-model.trim="data.text" />
  <br />
  <input type="radio" id="one" value="one" v-model="data.picked" />
  <label for="one">One</label>
  <input type="radio" id="two" value="two" v-model="data.picked" />
  <label for="two">Two</label>
  <br />

  <br />
  <ComponentExample v-model:msg="msg" v-model:data="data" @reset="onreset" />
</template>

<script lang="ts">
  import { defineComponent, reactive, toRefs } from 'vue';
  import ComponentExample from '@/components/ComponentExample.vue';

  export default defineComponent({
    name: 'ComponentPractice',
    components: { ComponentExample },
    setup: () => {
      const content = reactive({
        msg: '你好',
        data: {
          text: '空text',
          picked: ''
        }
      });

      const onreset = () => {
        content.msg = '';
        content.data = {
          text: '',
          picked: ''
        };
      };

      return {
        onreset,
        ...toRefs(content)
      };
    }
  });
</script>

<style scoped></style>
